<template>
  <div class="box">
    <div class="content">
      <!-- 头部 -->
      <div class="header">
        <van-icon name="arrow-left" @click="goBack" />
        <span>个人中心</span>
      </div>
      <div class="login">
        <div class="image">
          <img src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        </div>
        <router-link to="/Login">请点击登录</router-link>
      </div>
      <div class="grid">
      <van-grid>
        <van-grid-item  icon="gold-coin-o"  text="待付款" to="/Login" />
        <van-grid-item  icon="shop-collect-o" text="待收货" to="/Login" />
        <van-grid-item  icon="good-job-o" text="待评价"  to="/Login"/>
        <van-grid-item  icon="comment-o" text="全部订单"  to="/Login"/>
      </van-grid>
      <van-cell title="地址管理" is-link to="/Login" />
      <van-cell title="我的收藏夹" is-link to="/MyFavorites" />
      <van-cell title="关于我们" is-link to="/AboutUs" />
     </div>
      </div>
      <!-- <div @click="goReg">点击注册</div> -->
     
    <FooterBarVue class="footer"></FooterBarVue>
  </div>
</template>

<script>
import FooterBarVue from "@/components/FooterBar.vue";

export default {
  name: "My",
  components: {
    FooterBarVue,
  },
  methods: {
    goBack() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
}

.content {
  flex: 1;
  overflow: auto;
  background: url(../assets/logo.png) no-repeat 50% 75%;
  background-color: #efefef;
}

.header {
 height: 3.5rem;
 text-align: center;
 font-size: 1.3rem;
 line-height: 3.5rem;
 border-bottom: 2px solid gray;
}
.van-icon {
 float: left;
 padding-left: 10px;
 line-height: 3.5rem;
 color: rgb(24, 24, 64);
}
.login {
  width: 100%;
  height: 6.3333rem;
  box-sizing: border-box;
  padding: 10px;
  background-color: #f6d2d2;
  display: flex;
  align-items: center;
  font-size: 16px;
}
.login .image {
  width: 6.6667rem;
  height: 6.6667rem;
}
.login .image img {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  margin-top: 0.8rem;
}

</style>